<template>
  <div>
    <div v-if="operate == 'home'">
      <el-button type="primary" @click="addCapacity">新增模型</el-button>
      <el-button type="primary" @click="changeAddEquip">新增型号</el-button>
      <div class="equip-table">
        <el-table :data="tableData" :height="maxheight" :class="tableClass" border :span-method="objectSpanMethod"
          resizable highlight-current-row>
          <el-table-column prop="platformType" label="名称" v-if="this.type == 1">
            <template slot-scope="{ row }">
              {{ platformTypeVal(row.platformType) }}
            </template>
          </el-table-column>
          <el-table-column prop="templateName" label="装备模型名称">
            <template slot-scope="{ row }">
              <span>
                <span @click="clickeditTemplate(row)" style="cursor: pointer; color: #07f">{{ row.templateName }}
                  <i class="el-icon-edit" style="cursor: pointer; color: #07f; margin-left: 1px"></i>
                </span>
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="equipmentName" label="装备名称">
            <template slot-scope="{ row }">
              <span style="cursor: pointer; color: #07f">{{ row.equipmentName }}
                <i style="margin: auto" class="el-icon-delete plan-del" @click="delEquip(row)"></i>
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150px">
            <template slot-scope="{ row }">
              <el-button type="text" @click="changEditEquip(row)">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="detail" v-if="detail">
          <div class="detail-title">
            <span>{{ title }}详情</span>
            <el-button @click="changeClose">关闭</el-button>
          </div>
          <el-table :data="templateDetail">
            <el-table-column label="属性名称" prop="attributeName">
            </el-table-column>
            <el-table-column label="属性类型" prop="attributeValueType">
              <template slot-scope="{ row }">
                {{ attributeValueType(row.attributeValueType) }}
              </template>
            </el-table-column>
            <el-table-column label="值" prop="values" v-if="typeName == 'equip'">
              <template slot-scope="{ row }">
                {{ row.values?.join("~") }}
              </template>
            </el-table-column>
            <el-table-column label="单位" prop="unit"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <add-template v-else-if="operate == 'addTemplate'" :type="type" @goBack="goBack"
      @changeEdit="changeEdit"></add-template>
    <add-equip v-else-if="operate == 'addEquip'" :type="type" @changeEdit="changeEdit" @goBack="goBack"></add-equip>
    <edit-template v-else-if="operate == 'editTemplate'" @goBack="goBack" @changeEdit="changeEdit"
      :detailList="detailList" :type="type"></edit-template>
    <edit-equip v-else-if="operate == 'editEquip' && type != 4" @goBack="goBack" @changeEdit="changeEdit"
      :detailList="detailList" :type="type"></edit-equip>
    <EditDataLinkEquip v-else-if="operate == 'editEquip' && type == 4" @goBack="goBack" @changeEdit="changeEdit"
      :detailList="detailList" :type="type"></EditDataLinkEquip>
  </div>
</template>
<script>
import { getEquipList, getTemplateDetail, getEquipDetail, delEquip } from "@/api/equip";
import AddEquip from "./AddEquip.vue";
import AddTemplate from "./AddTemplate.vue";
import EditEquip from "./EditEquip.vue";
import EditTemplate from "./EditTemplate.vue";
import EditDataLinkEquip from "./EditDataLinkEquip.vue";
export default {
  components: { EditTemplate, AddEquip, EditEquip, EditDataLinkEquip, AddTemplate },
  props: {
    type: {
      type: Number,
      default: 0,
    },
    name: {
      type: String,
      default: "AllegationView",
    },
  },
  data() {
    return {
      detail: false,
      tableClass: "tableone",
      maxheight: "calc(100vh - 300px)",
      operate: "home",
      tableData: [],
      templateDetail: [],
      title: "",
      typeName: "",
      detailList: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    changeDetail(row, name) {
      this.typeName = name;
      if (name == "template") {
        this.title = row.templateName;
        getTemplateDetail({ templateId: row.templateId })
          .then((res) => {
            const { code, data, msg } = res?.data;
            if (code == 200) {
              this.templateDetail = data;
              this.detail = true;
            } else {
              this.$message.error(msg);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      } else {
        this.title = row.equipmentName;
        getEquipDetail({ equipmentId: row.equipmentId })
          .then((res) => {
            const { code, data, msg } = res?.data;
            if (code == 200) {
              this.templateDetail = data;
              this.detail = true;
            } else {
              this.$message.error(msg);
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
      }
    },
    changeClose() {
      this.detail = false;
    },
    getData() {
      this.tableData = [];
      getEquipList({ type: this.type, belong: 1 })
        .then((res) => {
          const { code, data, msg } = res?.data;
          if (code == 200) {
            data.forEach((element) => {
              if (element.equipments && element.equipments.length) {
                element.equipments.forEach((item) => {
                  this.tableData.push({
                    platformType: element.platformType,
                    templateType: element.templateType,
                    templateName: element.templateName,
                    templateId: element.templateId,
                    templateattributes: element.attributes,
                    weight: item.weight,
                    equipmentName: item.equipmentName,
                    equipmentId: item.equipmentId,
                    attributes: item.attributes,
                  });
                });
              } else {
                this.tableData.push({
                  platformType: element.platformType,
                  templateType: element.templateType,
                  templateName: element.templateName,
                  templateId: element.templateId,
                  templateattributes: element.attributes,
                  weight: "",
                  equipmentName: "",
                  equipmentId: "",
                  attributes: [],
                });
              }
            });

            if (this.type == 1) {
              this.tableData.sort((a, b) =>
                a["platformType"].localeCompare(b["platformType"])
              );
            }
          } else {
            this.$message.error(msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    addCapacity() {
      this.operate = "addTemplate";
    },
    objectSpanMethod({ column, rowIndex }) {
      if (column.label == "名称") {
        // column.property是表头的key
        let spanArr = this.getSpanArr(this.tableData, "platformType");
        const _row = spanArr[rowIndex];
        return {
          rowspan: _row,
          colspan: 1,
        };
      } else if (column.label == "装备模型名称") {
        let spanArr = this.getSpanArr(this.tableData, "templateId");
        const _row = spanArr[rowIndex];
        return {
          rowspan: _row,
          colspan: 1,
        };
      }
    },
    getSpanArr(data, index) {
      let spanArr = [];
      let pos = "";
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          spanArr.push(1);
          pos = 0;
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i][index] === data[i - 1][index]) {
            spanArr[pos] += 1;
            spanArr.push(0);
          } else {
            spanArr.push(1);
            pos = i;
          }
        }
      }
      return spanArr;
    },
    attributeValueType(val) {
      switch (val) {
        case "NUMERIC":
          return "值";
        case "RANGE":
          return "范围";
        default:
          return "--";
      }
    },
    clickeditTemplate(row) {
      this.detailList = row;
      this.operate = "editTemplate";
    },
    delEquip(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          delEquip({ equipmentId: row.equipmentId })
            .then((res) => {
              const { code, msg } = res?.data;
              if (code == 200) {
                debugger
                this.$message.success(msg);
                this.getData();
              } else {
                this.$message.error(msg);
              }
            })
            .catch((err) => {
              this.$message.error(err);
            });
        })
        .catch(() => { });
    },
    changeAddEquip() {
      this.operate = "addEquip";
    },
    changEditEquip(row) {
      this.detailList = row;
      this.operate = "editEquip";
    },
    goBack() {
      this.operate = "home";
      this.detail = false;
    },
    changeEdit() {
      this.operate = "home";
      this.detail = false;
      this.getData();
    },
    platformTypeVal(val) {
      switch (val) {
        case "BATTLE_PLAN":
          return "飞机平台";
        case "SPECIAL_PLAN":
          return "特种飞机平台";
        case "SHIP":
          return "舰艇平台";
        case "MISSILE":
          return "导弹平台";
        default:
          return "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.equip-table {
  display: flex;
  width: 100%;
  height: 100%;

  table {
    flex: 1;
    background: #fff;
  }

  .detail {
    width: 60%;
    padding-left: 16px;
    margin-left: 24px;
    height: calc(100vh - 300px);
    border-left: 1px solid #dcdfe6;
  }

  .detail-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .equip-name {
    display: flex;

    .equip {
      margin-right: 24px;
      margin-bottom: 8px;
    }
  }
}
</style>
